let laypage;
let form;
let layer;
layui.use(['laypage', 'form', 'layer'], function () {
    laypage = layui.laypage;
    form = layui.form;
    layer = layui.layer;



    // *****************************1。加载首页1页  3条文章的数据
    let data = {
        pagenum: 1,
        pagesize: 2
    };

    function list() {
        $.ajax({
            url: "/my/article/list",
            data: data,
            success: function (res) {
                if (res.status == 0) {
                    $("tbody").html("");
                    res.data.forEach(function (ele) {
                        let one = $(`<tr>
                      <td>${ele.title}</td>
                      <td>${ele.cate_name}</td>
                      <td>${ele.pub_date}</td>
                      <td>${ele.state}</td>
                      <th>
                        <a href="/article/edit/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger del" _id=${ele.Id}>删除</button>
                      </th>
                    </tr>`);
                        $("tbody").append(one);
                    });

                    // 初始化分页器
                    bar(res.total);
                }
            }
        });
    }
    list();


    //******************************2.加载分页器 执行一个laypage实例
    // 1.查文档 laypage 初始化
    // 2.laypage需要总数，从哪ajax回调函数内部才能，封装函数，不然代码冗余
    // 3.封装函数单独提出去
    // 4.当用户点击切换的时候，不需要注册点击事件，使用jump，用户点击后，使用点击后的参数重新调用ajax列表，再次调用数据；
    function bar(count) {
        laypage.render({
            elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号
            count: count, // 数据总数，从服务端得到,
            limit: data.pagesize, // limit限制 每页显示几条数据
            curr: data.pagenum,
            limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，选择每页显示几条
            layout: ['prev', 'page', 'next', 'limit', 'skip'], // 辅助

            // 当用户点击页面跳转的时候：
            jump: function (obj, first) {

                // 用户自己点击 跳转
                if (first == undefined) {

                    // obj是用户操作后对象数据  obj.curr
                    data.pagenum = obj.curr;
                    // ajax
                    list();

                }
            }
        });
    }

    //******************************3.筛选功能


    // 设置分类列表
    $("#aaa").append(`<option value="">请选择文章类别</option>`)
    $.ajax({
        url: "/my/article/cates",
        success: function (res) {
            if (res.status == 0) {
                // 遍历添加内容
                $.each(res.data, function (index, item) {
                    let one = $(`<option value="${item.Id}">${item.name}</option>`);
                    $("#aaa").append(one);
                });

                // 下面select不是选择器是让所select标签渲染
                form.render('select'); //刷新select选择框渲染
            }
        }
    });


    // 点击按钮
    $('form').on('submit', function (e) {
        e.preventDefault()
        // 1. 获取到分类 和状态数据  应该对于下面操作应该是数组或者对象
        let arr = $(this).serializeArray()
        console.log(arr);
        // 2.重新设置给data
        data.cate_id = arr[0].value
        data.cate_id = arr[0].value
        data.pagenum = 1

        // 3.重新请求ajax列表
        list()
    })



    //******************************4.删除功能
    // 事件委托
    $('tbody').on('click', '.del', function () {
        // 获取id
        let Id = $(this).attr('_id')
        layer.confirm('确定要删除么?', function (index) {
            // 发送请求
            $.ajax({
                url: '/my/article/delete/' + Id,
                success: function (res) {
                    layer.msg(res.message)
                    // 重回第一页
                    data.pagenum = 1;
                    list()
                }
            })
        });
    })

})